
<script setup lang="ts">
const nuxtWelcomeRef = useTemplateRef('nuxtWelcomeRef')

// 当组件可用时，监听将被触发
watch(nuxtWelcomeRef, () => {
  console.log('nuxtWelcomeRef 已挂载')
}, { once: true })

const open = ref(false)

// 刷新当前路由才会调用，仅在服务器端调用时有效，且不会包含在客户端构建中
onPrehydrate(el => {
  console.log('onPrehydrate: 页面水合之前调用', el) 
})

onBeforeRouteLeave((to, from) => {
  console.log('onBeforeRouteLeave: 路由离开前调用', to, from) 
})
</script>

<template>
  <div>
    <h1 class="bg-tikeyc-100 text-custom">api-components</h1>
    <ClientOnly>
      <template #fallback>
        <div>加载中...</div>
      </template>
      <div ref="nuxtWelcomeRef">
        <div v-for="item in 10" :key="item">
          {{ item }}
        </div>
      </div>
    </ClientOnly>
    <UButton color="primary" @click="open = !open">按钮</UButton>
    <!-- <div class="text-center">我是Teleport</div> -->
    <Teleport to="body">
      <div v-if="open" class="bg-amber-500 fixed top-[50%] left-[50%] transform -translate-x-1/2 -translate-y-1/2">
        我是Teleport
      </div>
    </Teleport>
  </div>
</template>

<style scoped>

</style>